<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP100视频教程第110讲</title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
button { 
	display:block; 
	margin:2px 2px;
	padding:4px 10px; 
}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	//移到右边
    $("#add").click(function(){
       $("#select1 option:selected").appendTo("#select2");
	})
	//移到左边
	    $("#remove").click(function(){
       $("#select2 option:selected").appendTo("#select1");
	})
	//全部移到右边
	    $("#add_all").click(function(){
       $("#select1 option").appendTo("#select2");
	})
	//全部移到左边
	$("#remove_all").click(function(){
       $("#select2 option").appendTo("#select1");
	})
	//双击选项
	$("#select1").dblclick(function(){
	 $("#select1 option:selected").appendTo("#select2");
	})
	//双击选项
	$("#select2").dblclick(function(){
	 $("#select2 option:selected").appendTo("#select1");
	})
});
</script>

</head>
<body>
	<div class="centent">
		<select multiple="multiple" id="select1" style="width:100px;height:160px;">
			<option value="1">PHP1001</option>
			<option value="2">PHP1002</option>
			<option value="3">PHP1003</option>
			<option value="4">PHP1004</option>
			<option value="5">PHP1005</option>
			<option value="6">PHP1006</option>
			<option value="7">PHP1007</option>
		</select>
		<div>
			<button id="add" >选中>></button>
			<button id="add_all" >全部>></button>
		</div>
	</div>

	<div class="centent">
		<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
			<option value="8">PHP1008</option>
		</select>
		<div>
			<button id="remove"><<选中</button>
			<button id="remove_all"><<全部</button>
		</div>
	</div>


</body>
</html>